{% load i18n %}
<div class="row" ng-controller="CartList">
  <div class="col-md-3">
    <div class="row">
      <div class="col-xs-12">
        {% load base_tags %}
        <nav class="filter">
            <h4><a href="" class="toggle toggle-nav">
                    <i class="fa fa-chevron-down"></i>
                    {% trans "search" %}
                </a></h4>
            <ul class="nav open" id="text">
                <li>
                  <form class="autocomplete-input input-group" id="text-search-autocomplete">
                    {% csrf_token %}
                    <div id="text-search-container">
                      <input autocomplete="off" ng-model="text_query"  type="text" name="text_search_input" id="text_search_input" placeholder="{% trans 'Search by name' %}" >
                    </div>
                    <span class="input-group-btn">
                      <button class="btn btn-primary" type="submit" id="text_search_btn"><i class="fa fa-search"></i></button>
                    </span>
                  </form>
                </li>
            </ul>
        </nav>
        {% if facet_type == 'groups' %}
        <nav class="filter">
          <h4><a href="#" class="toggle toggle-nav"><i class="fa fa-chevron-right"></i>{% trans "Group Categories" %}</a></h4>
          <ul class="nav closed" id="group-categories">
            {% verbatim %}
              <li ng-repeat="category in groupCategories">
                <a data-value="{{ category.slug }}" data-filter="categories__slug__in" ng-click="multiple_choice_listener($event)" class="{{category.active}}">
                    <div ng-if="category.fa_class" class="fa-stack fa-1g">
                        <i class="fa fa-square-o fa-stack-2x"></i><i class="fa {{category.fa_class}} fa-stack-1x"></i>
                    </div>{{ category.name | limitTo: 25 }}{{ category.name.length > 25 ? '...' : ''}}
                  <span class="badge pull-right">{{ category.member_count }}</span>
                </a>
              </li>
            {% endverbatim %}
          </ul>
        </nav>

        {% endif %}
      </div>
    </div>

  </div>
  <div class="col-md-9">
    <div class="col-md-2">
      <span>{% trans "Total" %}: </span>
      <span ng-bind="total_counts"></span>
    </div>
    {% include "search/_sort_filters.html" %}
    <div class="col-md-12 grid-spacer">
        {% if facet_type == 'groups' %}
            {% include 'search/_group_snippet.html' %}
        {% elif facet_type == 'groupcategories' %}
            {% include 'search/_groupcategory_snippet.html' %}
        {% elif facet_type == 'people' %}
            {% include "people/_profile_list_item.html" %}
        {% endif %}
    </div>
    {% include 'search/_pagination.html' %}
  </div>
</div>
